<template>
  <div id="header">
    <div class="img">
      <img src="../assets/images/phone.png" alt="">
    </div>
    <div class="sw-left swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video
            src="../assets/video/7.mp4"
            autoplay="autoplay"
            loop="loop"
            muted
          ></video>
        </div>
        <div class="swiper-slide">
          <video
            src="../assets/video/8.mp4"
            autoplay="autoplay"
            loop="loop"
            muted
          ></video>
        </div>
        <div class="swiper-slide">
          <video
            src="../assets/video/9.mp4"
            autoplay="autoplay"
            loop="loop"
            muted
          ></video>
        </div>
      </div>
    </div>
    <div class="sw-middle">
      <div class="sw-mi-top">
        <i>
          <span class="num">01</span> 
          <span class="hailiang">海量动静态壁纸</span>
        </i>
        <p>强大双端壁纸库，电脑、手机可同时设置壁纸</p>
      </div>
      <div class="sw-mi-bottom">
        <div class="sw-mi-bt-top">
          <img src="../assets/images/erweima.png" alt="">
        </div>
        <div class="sw-mi-bt-bottom">扫码下载元气壁纸手机版</div>
      </div>
    </div>
    <div class="sw-right">
      <div class="sw-ri-top">
        <i>
          <span class="num1">02</span> 
          <span class="duoduan1">多端共享权益</span>
        </i>
        <p>一个账号，电脑、手机均可使用，共享会员权益</p>
      </div>
      <div class="sw-ri-bottom">
        <button class="button">
          <span>
            <img src="../assets/images/android.png" alt="">
          </span>
          <span>Android版下载</span>
        </button>
        <button class="button">
          <span>
            <img src="../assets/images/iphone.png" alt="">
          </span>
          <span>iphone版下载</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from "@/assets/Swiper/dist/js/swiper.min.js";
import "@/assets/Swiper/dist/css/swiper.min.css";

export default {
  mounted() {
    var mySwiper = new swiper(".swiper-container", {
      paginationClickable: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: 2500,
      autoplayDisableOnInteraction: false,
    });
  },
};
</script>

<style lang="scss" scoped>
#header {
    display: flex;
    justify-content: flex-start;
    position: relative;
    .img {
      position: absolute;
      left: 28px;
      top: -51px;
      img {

      }
    }
  .sw-left {
    width:30%;
    margin:0 50px;
    video{
      width:65%;
    }
  }
  .sw-middle {
    margin-left: 30px;
    .sw-mi-top{
      i {
        .num {
          font-size: 48px;
        }
        .hailiang {
          font-size: 20px;
        }
      }
      p {
        color: #6d6d6d;
        font-size: 18px;
      }
    }
    .sw-mi-bottom {
      .sw-mi-bt-top {
        margin-top: 30px;
        img {
          border: 2px solid #febc00;
          width: 160px;
          height: 160px;
          border-radius: 10px;
        }
      }
      .sw-mi-bt--bottom {
        font-size: 18px;
      }
    }
  }
  .sw-right {
    margin-left: 50px;
    .sw-ri-top{
      i {
        .num1 {
          font-size: 48px;
        }
        .duoduan1 {
          font-size: 20px;
        }
      }
      p {
        color: #6d6d6d;
        font-size: 18px;
      }
    }
    .sw-ri-bottom {
      .button {
        display: block;
        width: 300px;
        height: 72px;
        background-color: #febc00;
        border-radius: 10px;
        border: 1px solid #febc00;
        margin-top: 50px;
        color: #ffffff;
        font-size: 24px;
        span {
          img {
            width: 34px;
            height: 34px;
          }
        }
      }
    }
  }
}
</style>